<!DOCTYPE html>
<html>
<head>
    <meta name="screen-orientation" content="portrait">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/>
    <title>金兔送福 新年献礼</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">

    <style type="text/css">
	
		body, html {
			width: 100%;
			height: 100%;
		}
        .wall { 
            width: 100%; height: 100%;
			background-image: url(img/result-bg.png);
			overflow: hidden;
			background-color: #121936;
			background-size: 100% 100% ;
			background-position: center center;
			background-repeat: no-repeat;
			z-index: -99;
        }
        ::-webkit-scrollbar {
            display: none;
        }
        body, html {
            width: 100%;
            height: 100%;
        }
        .mask {
            -webkit-filter:blur(5px);
            filter:blur(5px);
        }
        #main {
            -webkit-transition: all 1s;
            transition: all 1s;
        }
        .result-list {
            text-align: center;
            color: #4de7c8;
            font-size: 30px;
            line-height: 50px;
            margin-top: 50px;
            margin-bottom: 50px;
            font-family: '幼圆';
        }
        .result-title {
            text-align: center;
            color: #4de7c8;
            font-size: 40px;
            margin-top: 100px;
            font-family: '幼圆';
        }
.title-div{
					font-size: 28px;
					color: #FFFFFF;
					font-weight: bolder;
				    top: 33.5%;
				    left: 50%;
				    transform: translate(-50%,-50%);
				   position: absolute;
				   display: none;
		}

.title1-div{
	 display: none;
					font-size: 16px;
					color: #FFFFFF;
					font-weight: bolder;
				    top: 37.7%;
				    left: 50%;
				    transform: translate(-50%,-50%);
				   position: absolute;
		}

		.cmListDiv1{
			
			position: absolute;
			width: 85%;
			height: 40%;
			top: 35%;
			left: 7.5%;
			display: flex;   
			justify-content: center;
		}
		
		.cmListDiv2{
			position: absolute;
			width: 80%;
			height: 40%;
			top: 20%;
			left: 10%;
			display: flex;   
			justify-content: center;
		}
		
		.cmDiv1{
			
				   display: inline-block;
				   width: 300px;height: 350px;
				   background-image: url(img/lucky-result.png) ;
				   background-repeat: no-repeat;
				   background-size: 100% 100%;
				   margin-left: 10px;
				   color: #AC6925;
				   padding-top: 132px;
				   padding-left: 100px;
				   padding-right: 20px;
				   font-weight: bold;
				   font-size: 48px;
		}
		.cmDiv2{
				   display: inline-block;
				   width: 500px;height: 560px;
				   background-image: url(img/error.png) ;
				   background-repeat: no-repeat;
				   background-size: 100% 100%;
				   margin-left: 530px;
				   color: #AC6925;
				   padding-top: 90px;
				   padding-left: 120px;
				   padding-right: 20px;
				   
				   font-size: 28px;
		}
		.back-btn {
				  width: 200px;
				  height: 68px;
				  top: 95%;
				  right: 3%;
				transform: translate(-50%,-50%);
				 position: absolute;
				 
		}
    </style>
</head>
<body>
<div id="main" class="wall">
 <!--   <div class="result-title">获奖名单</div>
    <div class="result-list" v-for="result in results">
        <div v-for="item in result">
            {{item}}
        </div>
    </div> -->
	
	
	<div id='title' class="title-div"></div>
	<div id='title1' class="title1-div"></div>
	
	<div id="lucky"  class="cmListDiv1" >
	 	<div class="cmDiv1" v-for="item in result">
			<span  style="line-height: 20px;display: block;margin-top: 80px;">{{item.name}}</span>
		<!-- 	<p  style="overflow-wrap: break-word;line-height:20px;margin-top: 68px;">{{item.idCard}}</p>
			<span  style="line-height: 10px;display: block;margin-top: 70px;">{{item.mobile}}</span> -->
		</div> 
	</div> 
	<div id="err" style="display: none;" class="cmListDiv2">
	 	<div class="cmDiv2">
			<span  style="line-height: 60px;display: block;color: #B80909;font-size: 22px;margin-left: 90px;font-weight: bold;">错误提示</span>
			<span id='errName' style="line-height: 60px;display: block;margin-top: 70px;"></span>
		</div> 
	</div>
	
	<img class="back-btn" src="img/back.png" @click="toPage()"/>
	
	
</div>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: '#main',
        data: {
            result: []
        },
		methods:{
			toPage(){
				window.location.href = 'index.html'
			}
		},
        mounted () {
			var that =this
			
			$.ajax({
				type: 'GET',
				url: server_url+'/lottery/lucky/config',
				dataType: 'json',
				success: function(data){
					if(data.data.secondTitle){
						$("#title").html(data.data.secondTitle)
						$("#title1").html('抽奖日期：'+data.data.drawDate)
					}else{
						$('#err').css('display', 'block');
						$('#errName').html(data.data.errorMsg)
					}
					
				},
				error: function(xhr, type){
					console.log('-------------err')
				}
			})
			
			
            $.ajax({
            	type: 'GET',
            	url: server_url+'/lottery/lucky/result',
            	dataType: 'json',
            	success: function(data){
            		console.log(data)
					
            		that.result = data.data.list.slice(0,5)
					
					
					
			/* 		that.result.forEach(ret=>{
						
						
						var idCard_temp = ret.idCard.substring(4, 15) // 03199901015 提取身份证的第5位(下标为4)到第14位（结束位为15）
						ret.idCard = ret.idCard.replace(idCard_temp, '***********')
						
						var phone_temp = ret.mobile.substring(3, 7) // 03199901015 提取身份证的第5位(下标为4)到第14位（结束位为15）
						ret.mobile = ret.mobile.replace(phone_temp, '****')
						
						
						if(ret.name.length==2){
							ret.name = ret.name.substring(0,1)+'*' //截取name 字符串截取第一个字符，
						}else if(ret.name.length==3){
							ret.name = ret.name.substring(0,1)+"*"+ret.name.substring(2,3)//截取第一个和第三个字符
						}else if(ret.name.length>3){
							ret.name = ret.name.substring(0,1)+"*"+'*'+ret.name.substring(3,ret.name.length)//截取第一个和大于第4个字符
						}
						
						
					}) */
					
					
					
					
            	},
            	error: function(xhr, type){
            		console.log('-------------err')
            	}
            })   
        },
    })
</script>
</body>
</html>